<template>
  <div v-if="visible" class="mini-calendar-overlay" @click="handleClickOutside">
    <div 
      class="mini-calendar-wrapper" 
      :style="calendarStyle" 
      @click.stop 
    >
      <div class="mini-calendar-header">
        <button @click.stop="previousMonth" class="mini-nav-button">&#xE72B;</button>
        <span>{{ currentMonthFormatted }}</span>
        <button @click.stop="nextMonth" class="mini-nav-button">&#xE72A;</button>
      </div>
      <div class="mini-calendar-weekdays">
        <div v-for="day in weekdays" :key="day" class="mini-weekday">{{ day }}</div>
      </div>
      <div class="mini-calendar-days">
        <div v-for="(blank, index) in leadingBlankDays" :key="`mini-blank-leading-${index}`" class="mini-day-cell blank"></div>
        <div 
          v-for="day in daysInMonth" 
          :key="day.dateKey"
          :class="['mini-day-cell', { 'selected-day': isSelected(day.date), 'today-cell': isToday(day.date) }]"
          @click.stop="selectDate(day.date)"
        >
          {{ day.dayNumber }}
        </div>
      </div>
      <button @click.stop="closeCalendar" class="close-button-mini-calendar">关闭</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { getFormattedDateKey } from '../utils/dateUtils';

// No longer need v-click-outside-calendar directive here

export default {
  name: 'MiniCalendar',
  props: {
    // targetElement prop removed
    initialDate: { 
      type: Date,
      default: () => new Date()
    }
  },
  data() {
    return {
      visible: false,
      currentMonthView: new Date(this.initialDate.getFullYear(), this.initialDate.getMonth(), 1),
      selectedDateValue: this.initialDate ? new Date(this.initialDate) : null,
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      calendarStyle: {}, // Will be set in open()
      // positionOffset removed
    };
  },
  computed: {
    currentMonthFormatted() {
      return this.currentMonthView.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long' });
    },
    daysInMonth() {
      const year = this.currentMonthView.getFullYear();
      const month = this.currentMonthView.getMonth();
      const daysArray = [];
      const numDays = new Date(year, month + 1, 0).getDate();
      for (let i = 1; i <= numDays; i++) {
        const date = new Date(year, month, i);
        daysArray.push({
          date,
          dateKey: getFormattedDateKey(date),
          dayNumber: i
        });
      }
      return daysArray;
    },
    leadingBlankDays() {
      const firstDayOfMonthWeekday = new Date(this.currentMonthView.getFullYear(), this.currentMonthView.getMonth(), 1).getDay();
      return Array(firstDayOfMonthWeekday).fill(null);
    }
  },
  methods: {
    getFormattedDateKey,
    // positionCalendar method removed
    open() {
      this.currentMonthView = this.initialDate ? new Date(this.initialDate.getFullYear(), this.initialDate.getMonth(), 1) : new Date();
      this.selectedDateValue = this.initialDate ? new Date(this.initialDate) : null;
      this.calendarStyle = {
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        zIndex: 2101, // Higher z-index for the calendar itself over the overlay
      };
      this.visible = true;
      // No need for $nextTick(this.positionCalendar)
    },
    closeCalendar() {
      this.visible = false;
      this.$emit('close');
    },
    handleClickOutside() { // This will be called by the overlay click
      this.closeCalendar();
    },
    previousMonth() {
      this.currentMonthView = new Date(this.currentMonthView.getFullYear(), this.currentMonthView.getMonth() - 1, 1);
    },
    nextMonth() {
      this.currentMonthView = new Date(this.currentMonthView.getFullYear(), this.currentMonthView.getMonth() + 1, 1);
    },
    selectDate(date) {
      this.selectedDateValue = new Date(date);
      this.$emit('date-selected', new Date(date)); 
      this.closeCalendar();
    },
    isSelected(date) {
      if (!this.selectedDateValue) return false;
      return getFormattedDateKey(date) === getFormattedDateKey(this.selectedDateValue);
    },
    isToday(date){
        return getFormattedDateKey(date) === getFormattedDateKey(new Date());
    }
  },
  watch: {
    // targetElement watcher removed
    initialDate(newDate) {
      this.currentMonthView = newDate ? new Date(newDate.getFullYear(), newDate.getMonth(), 1) : new Date();
      this.selectedDateValue = newDate ? new Date(newDate) : null;
      // No need to call positionCalendar if visible
    }
  },
  mounted() {
    // No auto-open logic based on targetElement
  },
};
</script>

<style scoped>
.mini-calendar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(var(--theme-shadow-color-rgb), 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2100;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.mini-calendar-wrapper {
  background-color: var(--theme-bg-tertiary);
  border: var(--border-width) var(--border-style) var(--theme-border-secondary);
  box-shadow: var(--theme-shadow-popover);
  padding: var(--spacing-base);
  border-radius: var(--border-radius-lg);
  width: 300px; 
  font-size: var(--font-size-sm);
  color: var(--theme-text-primary);
  box-sizing: border-box;
}

.mini-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: var(--border-width) var(--border-style) var(--theme-border-primary);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text-primary);
}

.mini-calendar-header span {
    flex-grow: 1;
    text-align: center;
  font-size: var(--font-size-base);
}

.mini-nav-button {
  font-family: var(--font-family-icons);
  background: transparent;
  border: none;
  padding: var(--spacing-sm);
  cursor: pointer;
  border-radius: var(--border-radius-base);
  color: var(--theme-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1;
  transition: background-color var(--transition-duration-short), color var(--transition-duration-short);
  }

.mini-nav-button:hover {
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-primary);
}

.mini-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: calc(var(--font-size-sm) * 0.9);
  color: var(--theme-text-muted);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: var(--border-width) var(--border-style) var(--theme-border-primary);
}

  .mini-weekday {
  padding: var(--spacing-xs) 0;
  font-weight: var(--font-weight-medium);
}

.mini-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 38px;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

  .mini-day-cell {
    display: flex;
    align-items: center;
    justify-content: center;
  background-color: transparent;
  color: var(--theme-text-primary);
    cursor: pointer;
  border-radius: var(--border-radius-base);
  transition: background-color var(--transition-duration-short), color var(--transition-duration-short), border-color var(--transition-duration-short);
  border: var(--border-width) var(--border-style) transparent;
  font-size: var(--font-size-sm);
}

.mini-day-cell:not(.blank):hover {
  background-color: var(--theme-bg-hover);
  border-color: var(--theme-border-secondary);
    }

.mini-day-cell.blank {
      background-color: transparent;
      cursor: default;
    }

.mini-day-cell.today-cell {
  border: var(--border-width) var(--border-style) var(--theme-accent-highlight);
  color: var(--theme-accent-highlight);
  font-weight: var(--font-weight-semibold);
    }

.mini-day-cell.selected-day {
  background: var(--theme-accent-primary);
  color: var(--theme-text-on-accent);
  font-weight: var(--font-weight-bold);
  border-color: transparent;
}

.close-button-mini-calendar {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  background-color: var(--theme-bg-button-secondary);
  border: var(--border-width) var(--border-style) var(--theme-border-secondary);
  border-radius: var(--border-radius-base);
  cursor: pointer;
  transition: background-color var(--transition-duration-short), color var(--transition-duration-short);
  text-align: center;
}

.close-button-mini-calendar:hover {
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-primary);
  border-color: var(--theme-border-primary);
}
</style> 